<script setup>
import Header from './components/Header.vue';
import AsideMenu from './components/AsideMenu.vue';
import { reactive, toRefs } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import gsap from 'gsap'

const data = reactive({
    loading: true
})

const { loading } = toRefs(data)

onMounted(() => {
    const tl = new gsap.timeline()

    tl.to('.loading-mask',{
        duration: 1,
        opacity: 0,
        y: -150,
        ease: 'circ',
        delay: 1,
        display: 'none'
    }).from('.header',{
        duration: 1,
        ease: 'circ',
        y: -50
    }).from(".main-content", {
        duration: 1,
        opacity:0
    })
})

</script>

<template>
    <div class="loading-mask">
        <h1>Ease Sleep</h1>
    </div>
    <Header class="header"></Header>
    <div class="main-content flex-row">
        <RouterView></RouterView>
    </div>
</template>

<style scoped>
.loading-mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(15deg, #202d48, #000);
    z-index: 9999;
    text-align: center;
    font-size: 24px;
    color: #ff0266;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-content{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}
</style>
